<template>
	<view>
		<view class="order_list">
			<view class="order_list_tab">
				<view class="order_list_tab_name" v-for="(item,index) in orderLIstArray" :key="index">
					{{item.name}}
				</view>
				<view class="order_list_tab_lines" v-show="currentType=='0'">

				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//默认展示的页面并且要显示的下划线
				currentType: "0",
				//订单数组
				orderLIstArray: [{
						name: '全部',
						type: 0
					},
					{
						name: '待支付',
						type: 1
					},
					{
						name: '待评价',
						type: 2
					}

				],


			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: $bg-color;
	}

	.order_list {
	width: 100%;
	height: 88rpx;
	background: #fff;
	display: flex;
	line-height: 88rpx;
	font-size: 30rpx;
	font-weight: bold;
	/* // 纯css吸顶 */
	position: -webkit-sticky;
	position: sticky;
	top: var(--window-top);
	z-index: 99;

		.order_list_tab {
			//  开启纵向布局
			// width: 275rpx;
			// height: 80rpx;
			display: flex;
			margin-left: 50rpx;
			margin-right: 50rpx;
		

			.order_list_tab_name {
				// margin: auto ;
					text-align: center;
					position: relative;
					width: 33.333%;

			}

			.order_list_tab_lines {
				width: 86rpx;
				height: 5rpx;
				background: #1db5b6;
				position: absolute;
				left: 50%;
				bottom: 10rpx;
				transform: translate(-50%, 0);
			}

		}


	}
</style>
